<template>
  <div>
    <el-dialog
        :dialogHeight="dialogHeight"
        :title="title"
        class="dialog custom-dialog"
        v-model="dialogVisible"
        append-to-body
        :modal="dialogModal"
        :fullscreen="fullscreen"
        :close-on-click-modal="dialogClickModalClose"
        :draggable="dialogDraggable"
        :show-close="false"
        :width="dialogWidth"
        :align-center="dialogAlignCenter"
        :center="dialogContentCenter"
        :class="className"
        @open="open"
        @close="close"
    >
      <template #header>
        <div class="header">
          <div class="titleClass">{{ title }}</div>
          <div class="icon-content">
            <div :title="!fullscreen ? '全屏' : '还原'" class="execute" @click="zoom">
              <i class="iconfont" :class="!fullscreen ? 'icon-fullscreen' : 'icon-tuichuquanping'"
                 style="font-size: 20px"></i>
            </div>
            <div title="关闭" class="execute" @click="close">
              <i class="my-icon icon-close6" style="font-size: 20px"></i>
              <!-- <SvgIcon name="ele-Close" :size="20" /> -->
            </div>
          </div>
        </div>
      </template>
      <div :style="{ height: dialogBodyHeight }" class="overflow-auto">
        <slot></slot>
      </div>
      <template #footer v-if="dialogFooterBtn">
        <div class="footer">
          <slot name="footer">
            <el-button @click="SaveSubmit" v-if="showSubmit">确定</el-button>
            <el-button @click="CloseSubmit">关闭</el-button>
          </slot>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="CustomDialog">
import {nextTick, ref, watch} from 'vue';
import {useVModel} from '@vueuse/core';

interface IPros {
  visible: boolean;
  // 对话框的标题
  title?: string;
  // 内容区域高度
  dialogHeight?: string;
  // 对话框的宽度
  dialogWidth?: string;
  className?: string;
  // 是否需要遮罩层
  dialogModal?: boolean;
  // 是否水平垂直对齐对话框
  dialogAlignCenter?: boolean;
  // 是否让 Dialog 的 header 和 footer 部分居中排列
  dialogContentCenter?: boolean;
  // 是否可以通过点击 modal 关闭 Dialog
  dialogClickModalClose?: boolean;
  // 为 Dialog 启用可拖拽功能
  dialogDraggable?: boolean;
  // 是否显示底部按钮
  dialogFooterBtn?: boolean;
  // 是否显示全屏按钮
  showExpand?: boolean;
  // 是否显示关闭按钮
  showClose?: boolean;
  showSubmit?: boolean;
  // dialogVisible?: boolean;
  // fullscreen?: boolean;
}

const props = withDefaults(defineProps<IPros>(), {
  dialogTitle: '默认标题',
  dialogWidth: '50%',
  dialogHeight: 'auto',
  dialogModal: true,
  dialogAlignCenter: false,
  dialogContentCenter: false,
  dialogClickModalClose: false,
  dialogDraggable: true,
  dialogFooterBtn: true,
  showExpand: false,
  showClose: true,
});

const emit = defineEmits(['save', 'cancellation', 'open', 'close', 'zoom', 'update:visible', 'submit']);

const fullscreen = ref(false);

const dialogVisible = useVModel(props, 'visible', emit);

// const dialogVisible = ref(false);
watch(
    [() => props.visible, () => props.dialogHeight, () => props.dialogFooterBtn],
    () => {
      nextTick(() => {
        menuDialogZoom();
      });
    },
    {deep: true, immediate: true}
);
const dialogBodyHeight = ref<string | number>(); // 初始值为字符串类型

const open = () => {
};

const close = () => {
  emit('close');
};

const zoom = () => {
  fullscreen.value = !fullscreen.value;
  menuDialogZoom();
};

const menuDialogZoom = () => {
  // if (props.visible && fullscreen.value && props.dialogFooterBtn) {
  // 	dialogBodyHeight.value = 'calc(100vh - 120px)';
  // 	console.log('包含footbtn， height:  ', dialogBodyHeight.value);
  // } else if (props.visible && fullscreen.value && !props.dialogFooterBtn) {
  // 	dialogBodyHeight.value = 'calc(100vh - 80px)';
  // 	console.log('不包含footbtn， height:  ', dialogBodyHeight.value);
  // } else {
  // 	dialogBodyHeight.value = props.dialogHeight;
  // 	console.log('默认height:  ', dialogBodyHeight.value);
  // }
  // dialogBodyHeight.value = props.dialogHeight;
};

const SaveSubmit = () => {
  emit("submit")
};
const CloseSubmit = () => {
  emit('close');
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
}

.icon-content {
  display: flex;
  width: 80px;
  cursor: pointer;
  align-items: center;
  justify-content: flex-end;
}

.titleClass {
  font-weight: bold;
}

.icon-item-content {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.icon-item-content:nth-child(1) {
  margin-right: 10px;
}

.icon-item-content:hover {
  color: #1f6feb;
  cursor: pointer;
}

.single-uploader__icon {
  font-size: 18px;
}

.execute {
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  border-top: 1px solid #d9d9d9;
  padding: 20px;
}
</style>
